{$layout}

{$template "menu"}

<h3>监控项 <a :href="'/agents/apps/addItem?agentId=' + agentId + '&appId=' + app.id + '&from=' + from"  >添加</a></h3>

<p class="comment" v-if="app.items == null || app.items.length == 0">暂时还没有监控项。</p>

<table class="ui table selectable" v-if="app.items != null && app.items.length > 0">
    <thead>
        <tr>
            <th>监控项</th>
            <th>刷新间隔</th>
            <th>阈值</th>
            <th style="width:11em">当前数值</th>
            <th class="two op">操作</th>
        </tr>
    </thead>
    <tr v-for="item in items" :class="{warning:item.isWarning, error:item.isError}">
        <td>{{item.name}}
            <br/>
            <span class="ui label tiny red" v-if="!item.on">未启用</span>
			<span class="ui label tiny" v-if="item.sourceName.length > 0">{{item.sourceName}}</span>
			<span v-if="item.costMs > 0" class="ui label tiny" title="最后一次运行耗时">{{item.costMs}}ms</span>
        </td>
        <td>{{item.interval}}</td>
        <td>
            <span v-if="item.thresholds == null || item.thresholds.length == 0" class="disabled">还没有设置</span>
            <div v-if="item.thresholds != null && item.thresholds.length > 0" v-for="threshold in item.thresholds" style="margin-top:0.2em;margin-bottom:0.4em">
                <span class="ui label small">{{threshold.param}} <strong style="font-style:italic">{{threshold.operator}}</strong> {{threshold.value}}
                    <em v-if="threshold.noticeMessage.length > 0">[{{threshold.levelName}}:...]</em>
                    <em v-if="threshold.noticeMessage.length == 0">[{{threshold.levelName}}]</em> <em v-if="threshold.actions != null && threshold.actions.length > 0">[{{threshold.actions.length}}动作]</em>
					<em v-if="threshold.maxFails > 1">[连续{{threshold.maxFails}}次]</em>
                </span>
            </div>
        </td>
        <td>
            <a :href="'/agents/apps/itemValues?agentId=' +  agentId + '&appId=' + app.id + '&itemId=' + item.id" v-if="item.latestTime.length > 0" style="display: block;padding:4px;"><pre>{{item.latestValue}}</pre></a>
            <em v-if="item.latestTime.length > 0">{{item.latestTime}}</em>
            <span v-if="item.latestTime.length == 0">-</span>
        </td>
        <td>
            <a :href="'/agents/apps/itemDetail?agentId=' + agentId + '&appId=' + app.id + '&itemId=' + item.id">详情</a> &nbsp;
            <a href="" @click.prevent="deleteItem(item.id)">删除</a>
        </td>
    </tr>
</table>